import React, { Component } from "react";
import { Card, Descriptions } from "antd";
import { BarcodeOutlined } from "@ant-design/icons";
import "antd/dist/antd.css";

export class StepDetail3 extends Component {
  constructor(props) {
    super(props);
    this.info = props.info;
  }

  render() {
    return (
      <div style={{ marginTop: "16px" }}>
        <Card>
          <Descriptions
            title={`发货单${this.info.delivery_id}`}
            bordered
            column={2}
          >
            <Descriptions.Item label="公司">{`${this.info.company_name}(${this.info.company_id})`}</Descriptions.Item>
            <Descriptions.Item label="创建时间">
              {this.info.delivery_date}
            </Descriptions.Item>
            <Descriptions.Item
              label="操作员"
              span={2}
            >{`${this.info.deli_opname}(${this.info.deli_opid})`}</Descriptions.Item>
            <Descriptions.Item label="发货详情" span={3}>
              {this.info.delivery_record.map((product) => (
                <div>
                  <BarcodeOutlined /> &nbsp;
                  <h>{`${product.plant_name}  ${product.goods_name} (${product.quantity})`}</h>
                </div>
              ))}
            </Descriptions.Item>
          </Descriptions>
        </Card>
      </div>
    );
  }
}

export default StepDetail3;
